<template>
	<div>
		<ContentWrap>
			<!-- 搜索工作栏 -->
			<el-form
					ref="queryFormRef"
					:inline="true"
					:model="queryParams"
					class="-mb-15px"
					label-width="90px"
			>
				<el-form-item label="文档ID" prop="id">
					<el-input
							v-model="queryParams.id"
							class="!w-240px"
							clearable
							placeholder="请输入文档ID"
							@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="文档名称" prop="fileName">
					<el-input
							v-model="queryParams.fileName"
							class="!w-240px"
							clearable
							placeholder="请输入文档名称"
							@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="文档职能" prop="org">
					<el-select
							v-model="queryParams.org"
							placeholder="请选择职能"
							clearable
							size="large"
							style="width: 240px"
					>
						<el-option v-for="(item, index) in orgList" :key="index" :label="item" :value="item"/>
					</el-select>
				</el-form-item>
				<el-form-item label="发布人名称" prop="id">
					<el-input
							v-model="queryParams.userName"
							class="!w-240px"
							clearable
							placeholder="请输入发布人名称"
							@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="创建时间" prop="createTime">
					<el-date-picker
							v-model="queryParams.createTime"
							:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
							class="!w-240px"
							end-placeholder="结束日期"
							start-placeholder="开始日期"
							type="daterange"
							value-format="YYYY-MM-DD HH:mm:ss"
					/>
				</el-form-item>
				<el-form-item v-hasPermi="['system-my-doc-query']">
					<div class="model-button">
						<el-button @click="handleQuery">
							<Icon class="mr-5px" icon="ep:search"/>
							搜索
						</el-button>
						<el-button @click="resetQuery"> 重置</el-button>
					</div>
				</el-form-item>
			</el-form>
			<div class="model-button" style="margin-top: 40px">
				<el-button
						color="#0D0D0D"
						v-hasPermi="['system-my-doc-create']"
						@click="openForm('create')"
				>
					<Icon class="mr-5px" icon="ep:plus"/>
					新增
				</el-button>
			</div>
			
			<!-- 列表 -->
			<el-table v-loading="loading" :data="list" style="margin-top: 20px" stripe>
				<el-table-column
						sortable
						align="center"
						label="创建时间"
						prop="createTime"
						:formatter="dateFormatter"
				/>
				<el-table-column align="center" label="发布人" prop="userName">
					<template #header>
						<div class="postedByNameBox">
							<div class="names">发布人</div>
							<div class="postedByNameStyle">
								<el-input
										clearable
										v-model="queryParams.nicknameFirst"
										:prefix-icon="Search"
										@change="postedSearch"
										placeholder="按首字母筛选"/>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center" label="文档名称" prop="fileName" sortable/>
				<el-table-column align="center" label="文档职能" prop="org" sortable>
					<template #default="scope">
						<el-popover placement="right-start" :width="230" trigger="click" ref="popoverRef">
							<template #reference>
								<div
										class="flex"
										style="
                    align-items: center;
                    justify-content: center;
                    width: fit-content;
                    margin: auto;
                    text-align: center;
                    cursor: pointer;
                  "
								>
									<div> {{ scope.row.org }}</div>
									<img
											src="@/assets/imgs/change.png"
											style="width: 18px; height: 18px; margin-left: 5px"
									/>
								</div>
							</template>
							
							<div class="changeOrg">
								<div class="changeOrg-title">替换为</div>
								<div class="changeOrg-item">
									<div class="changeOrg-item-title">职能</div>
									<div>
										<el-select
												:teleported="false"
												v-model="editOrgLevel.org"
												placeholder="职能"
												clearable
												size="large"
												style="width: 160px"
												@change="orgChange"
										>
											<el-option
													v-for="(item, index) in orgList"
													:key="index"
													:label="item"
													:value="item"
											/>
										</el-select
										>
									</div>
								</div>
								<div class="changeOrg-item">
									<div class="changeOrg-item-title">职级</div>
									<div>
										<el-select
												:teleported="false"
												v-model="editOrgLevel.level"
												placeholder="职级"
												clearable
												size="large"
												style="width: 160px"
										>
											<el-option
													v-for="(item, index) in levelList"
													:key="index"
													:label="item"
													:value="item"
											/>
										</el-select
										>
									</div>
								</div>
								<div class="changeOrg-confirm" @click="confirmChangeOrgLevel(scope.row)">确定</div>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column align="center" label="文档ID" prop="id" sortable/>
				<el-table-column :width="300" align="center" label="操作">
					<template #default="scope">
						<el-button
								v-hasPermi="['system-my-doc-update']"
								link
								type="primary"
								@click="downFile( scope.row)"
						>
							查看文档
						</el-button>
						<el-button
								v-hasPermi="['system-my-doc-delete']"
								link
								type="danger"
								@click="handleDelete(scope.row)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="flex align-items" style="justify-content: center">
				<Pagination
						v-model:limit="queryParams.pageSize"
						v-model:page="queryParams.pageNo"
						:total="total"
						@pagination="getList"
				/>
			</div>
		</ContentWrap>
		
		<MyDocFrom ref="formRef" @success="getList"/>
	</div>
</template>

<script setup lang="ts">
import {dateFormatter} from '@/utils/formatTime'
import {GetOrgList, GetLevelList} from '@/api/system/org'
import {getDocPage, getDocPut, getDocDelete} from '@/api/system/my-doc'
import MyDocFrom from './MyDocFrom.vue'
import {Search} from '@element-plus/icons-vue'

const postedByName = ref("")
const message = useMessage() // 消息弹窗

const downFile = (row) => {
  const link = document.createElement('a');
  link.style.display = 'none';
  // 设置下载地址
  link.setAttribute('href', row.fileUrl);
  // 设置文件名
  link.setAttribute('download', row.fileName);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

const popoverRef = ref(null)
const queryFormRef = ref(null)
const loading = ref(false) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  id: '',
  org: '',
  nicknameFirst: '',
  fileName: '',
  userName: '',
  userId: '',
  createTime: ''
})

const confirmChangeOrgLevel = async (row) => {
  if (!editOrgLevel.org.trim()) message.error('职能不能为空')
  if (!editOrgLevel.level.trim()) message.error('职级不能为空')
  
  await getDocPut({...editOrgLevel, id: row.id})
  popoverRef.value.hide()
  editOrgLevel.org = ''
  editOrgLevel.level = ''
  message.success('修改成功')
  getList()
}

const editOrgLevel = reactive({
  org: '',
  level: ''
})

const orgChange = () => {
  if (editOrgLevel.org) editOrgLevel.level = ''
  apiGetLevelList()
}

const orgList = ref([])
const apiGetOrgList = async () => {
  orgList.value = await GetOrgList()
}


// 职级列表
const levelList = ref([])
const apiGetLevelList = async () => {
  levelList.value = await GetLevelList(editOrgLevel.org)
}

/** 删除按钮操作 */
const handleDelete = async (row: object) => {
  try {
    // 删除的二次确认
    await message.delConfirm(`${row.fileName}确定删除此文档？`)
    // 发起删除
    await getDocDelete(row.id)
    message.success('删除成功')
    // 刷新列表
    await getList()
  } catch {
  }
}

/** 查询角色列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await getDocPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const postedSearch = () => {
  getList()
}

onMounted(() => {
  apiGetOrgList()
  getList()
})
onUpdated(() => {
})
onUnmounted(() => {
})
</script>

<style scoped lang="scss">

.changeOrg {
  &-title {
    font-size: 16px;
    font-weight: 400;
    color: #000;
  }
  
  &-confirm {
    width: 163px;
    height: 32px;
    margin-top: 11px;
    margin-left: 36px;
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: #0d0d0d;
    border-radius: 8px;
  }
  
  &-item {
    display: flex;
    align-items: center;
    margin-top: 16px;
    
    :deep(.el-select__wrapper) {
      height: 32px !important;
      min-height: 32px !important;
    }
    
    &-title {
      margin-right: 8px;
      font-size: 14px;
      font-weight: 400;
      color: #0d0d0d;
    }
  }
}
</style>
